<template>
  <je-table
    ref="$grid"
    border
    auto-resize
    show-overflow="ellipsis"
    keep-source
    show-header-overflow
    class="select-personnel-grid"
    :loading="loading"
    resizable
    size="mini"
    header-align="center"
    :edit-config="{
      trigger: 'click',
      mode: 'cell',
      showStatus: false,
      showInsertStatus: false,
    }"
    :store="gridStore"
  >
    <je-column type="checkbox" width="40" align="center"></je-column>
    <je-column :title="$t('importView.number')" type="seq" width="50" align="center"></je-column>
    <je-column field="tableName" :title="$t('importView.tableName')" width="260"> </je-column>
    <je-column field="tableCode" :title="$t('importView.tableCode')" min-width="260"> </je-column>
    <je-column field="typeName" :title="$t('importView.tableType')" width="140" align="center">
    </je-column>
    <template #pager>
      <je-pager
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :page-sizes="tablePage.pageSizes"
        align="left"
        style="height: 40px; padding: 0 10px"
        background
        :size="size"
        :total="tablePage.totalResult"
        :layouts="['JumpNumber', 'Sizes', 'FullJump', 'Total', 'Refresh']"
        @load="onPageChange"
      />
    </template>
    <template #tbar>
      <je-toolbar
        style="
          border-top: 1px solid #e6e6e6;
          border-left: 1px solid #e6e6e6;
          border-right: 1px solid #e6e6e6;
        "
      >
        <TbFill />
        <je-input-search
          v-model:value="searchValue"
          :placeholder="$t('searchText')"
          style="width: 280px"
          :allow-clear="allowclear"
          :enter-button="$t('searchText')"
          @search="queryColumn"
        >
          <template #prefix> <i class="fal fa-search" /> </template>
        </je-input-search>
      </je-toolbar>
    </template>
  </je-table>
</template>

<script>
  import { defineComponent, ref, onMounted, reactive } from 'vue';
  import { Grid, Data, Pager, Toolbar, Input } from '@jecloud/ui';
  import { getImportData } from '@/api/index';
  import { JE_TABLE_PAGESIZES } from '../../helper/common';
  export default defineComponent({
    name: 'TableImport',
    components: {
      JeTable: Grid,
      JeColumn: Grid.Column,
      JePager: Pager,
      TbFill: Toolbar.Fill,
      JeInputSearch: Input.Search,
      JeToolbar: Toolbar,
    },
    props: {
      modalData: Object,
      productData: Object,
    },
    setup(props, { expose }) {
      const $grid = ref(null);
      const loading = ref(true);
      const gridStore = Data.Store.useGridStore({
        data: [],
      });
      const tablePage = reactive({
        currentPage: 1,
        pageSize: 30,
        pageSizes: JE_TABLE_PAGESIZES,
        totalResult: 30,
      });
      const searchValue = ref('');
      /**初始化数据*/
      const initData = () => {
        loading.value = true;
        getImportData(
          {
            SY_PRODUCT_ID: props.productData.productId,
            page: tablePage.currentPage,
            start: (tablePage.currentPage - 1) * tablePage.pageSize,
            limit: tablePage.pageSize,
            fuzzyValue: searchValue.value,
          },
          { pd: props.productData.productCode },
        ).then((data) => {
          gridStore.loadData(data.rows);
          tablePage.totalResult = data.totalCount;
          loading.value = false;
        });
      };

      onMounted(() => {
        initData();
      });
      const onPageChange = () => {
        //tablePage.currentPage = page;
        initData();
      };
      const queryColumn = (e) => {
        initData();
      };

      expose({ $grid });
      return {
        gridStore,
        $grid,
        loading,
        tablePage,
        onPageChange,
        searchValue,
        queryColumn,
        allowclear: true,
      };
    },
  });
</script>

<style></style>
